<template>
    <v-card style="width:100%;height:auto">
        <v-row style="padding-left:20px;">
            <v-col cols="2">
                <VZDatePicker v-model="month" label="月份范围" type="monthrange" ></VZDatePicker>
            </v-col>
            <v-col cols="8"><h2>基地售后数据月导入完成率</h2></v-col>
            <v-col cols="2"></v-col>
        </v-row>
        <v-row style="margin-left:5px;margin-right:5px" no-gutters>
            <v-col cols="2" >
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_0" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
            <v-col cols="2" v-show="dataLength >= 2">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_1" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
            <v-col cols="2" v-show="dataLength >= 3">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_2" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
            <v-col cols="2" v-show="dataLength >= 4">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_3" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
            <v-col cols="2" v-show="dataLength >= 5">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_4" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
            <v-col cols="2" v-show="dataLength >= 6">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_5" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
        </v-row>

        <v-row style="margin-left:5px;margin-right:5px" no-gutters>
            <v-col cols="2" v-show="dataLength >= 7">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_6" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
            <v-col cols="2" v-show="dataLength >= 8">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_7" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
            <v-col cols="2" v-show="dataLength >= 9">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_8" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
            <v-col cols="2" v-show="dataLength >= 10">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_9" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
            <v-col cols="2" v-show="dataLength >= 11">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_10" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
            <v-col cols="2" v-show="dataLength >= 12">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_11" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
        </v-row>

        <v-row style="margin-left:5px;margin-right:5px" no-gutters>
            <v-col cols="2" v-show="dataLength >= 13">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_12" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
            <v-col cols="2" v-show="dataLength >= 14">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_13" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
            <v-col cols="2" v-show="dataLength >= 15">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_14" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
            <v-col cols="2" v-show="dataLength >= 16">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_15" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
            <v-col cols="2" v-show="dataLength >= 17">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_16" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
            <v-col cols="2" v-show="dataLength >= 18">
                <div style="margin:5px;border: 2px dashed;border-radius:10px">
                    <div ref="pieTarget_17" style="width:100%;height:25vh"></div>
                </div>
            </v-col>
        </v-row>
    </v-card>
</template>
<script>
    export default {
        data () {
            return {
                sql:"select base,COUNT(CASE WHEN defect_id is null THEN 1 END) AS empty_num,COUNT(CASE WHEN defect_id is not null THEN 1 END) AS num from tt_sale_record_qms where  MARK_FOR_DELETE = 0 [and DATE_FORMAT(create_time, '%Y-%m') >= #{monthStart}] [and DATE_FORMAT(create_time, '%Y-%m') <= #{monthEnd}] and base REGEXP #{base_regexp} group by base",
                month:[this.getCurrentMonth(),this.getCurrentMonth()],
                base_regexp:'^[A-Za-z]+$',
                dataLength:0

            }
        },
        watch: {
            month(newValue, oldValue) {
                if (newValue != undefined && newValue != '') {
                    this.loadData();
                }
            },
        },
        methods: {
            show(){
                app.utils.showMessage(this.prop);
            },
            getCurrentMonth() {
                const currentDate = new Date();
                const year = currentDate.getFullYear();
                const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 月份补零
                return `${year}-${month}`;
            },
            loadData(){
                let _this = this;
                let params = {"SQL": this.sql};

                // 先清空所有图表
                for(let i=0; i<18; i++){
                    let chart = 'chartTarget_'+i;
                    if(this[chart]) {
                        this[chart].dispose();
                        this[chart] = null;
                    }
                }

                app.utils.ajaxRequest({
                    hideMsg: true,
                    hideMask: true,
                    url: app.path().dispose + "?functionCode=QMS_CUSTOM_QUERY_SQL",
                    params: {
                        "queryCondition[monthStart]": _this.month[0],
                        "queryCondition[monthEnd]": _this.month[1],
                        "queryCondition[base_regexp]": _this.base_regexp,
                        functionParam: JSON.stringify(params)
                    },
                    callBack(res) {
                        let dataList = [];
                        let titleList = [];
                        let numList = [];
                        if (res.success) {
                            _this.dataLength = res.rows.length;
                            if(res.rows.length === 0) {
                                // 如果没有数据，确保dataLength为0
                                _this.dataLength = 0;
                                return;
                            }
                            res.rows.forEach((item)=>{

                                dataList.push([{
                                    name:'已完成',
                                    value:item.num
                                },
                                    {
                                        name:'未完成',
                                        value:item.empty_num
                                    }])
                                titleList.push(app.utils.getEntryValue("MQP_BASE", item.base));
                                numList.push(item.num + item.empty_num);
                            })
                            console.log(dataList);
                            for(let i=0;i<dataList.length;i++){
                                _this.loadChart(titleList[i],numList[i],dataList[i],i);
                            }
                        }
                    }
                });
            },

            loadChart(title,num,dataList,index){
                let data = [{name:'已完成',value:264},{name:'未完成',value:300}];
                let target = 'pieTarget_'+index;
                let chartT = 'chartTarget_'+index;
                let _this = this;
                this[chartT] = this.$echarts.init(this.$refs[target]);
                let option = {
                    color:['#388E3C','#EF6C00'],
                    title: {
                        text: title + ':\t' + num,
                        textStyle:{fontSize:30},
                        
                        subtextStyle:{fontSize:14,fontWeight:'bold'},
                        left: 'center',
                        top:'1%'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c} ({d}%)'
                    },
                    grid: {
                        left: '1%',
                        right: '1%',
                        bottom: '1%',
                        top:'1%',
                        containLabel: true
                    },
                    series: [

                        {
                            name: '初步分析完成率',
                            top:'24%',
                            type: 'pie',
                            radius: ['35%', '83%'],
                            avoidLabelOverlap: false,
                            padAngle: 1,
                            itemStyle: {
                                normal: {
                                    borderRadius: 5,
                                    borderColor: '#fff',
                                    borderWidth: 2,
                                    label: {
                                        show: true,
                                        position: 'inside',
                                        formatter: '{c}\n ({d}%)'
                                    },
                                }
                            },

                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 16,
                                    fontWeight: 'bold'
                                }
                            },
                            label: {
                                show:false,
                                formatter: '{b}\n {@2012} ({d}%)'
                            },
                            data: dataList
                        }
                    ]
                }
                option && this[chartT].setOption(option);
                setTimeout(()=>{this[chartT] && this[chartT].resize();},100);

            },
        },
        mounted () {
            this.loadData();
            window.onresize = () => {
                for(let i=0;i<18;i++){
                    let chart = 'chartTarget_'+i;
                    this[chart] && this[chart].resize();
                }
            };
        },
        props: {
            prop:{type:String,desc:'基本参数'}
        }
    }
</script>
  